<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/style.css"/>
    <link href="assets/css/codemirror.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="font/css/font-awesome.min.css" />
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
    <![endif]-->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="Widget/Validform/5.3.2/Validform.min.js"></script>
    <script src="assets/js/typeahead-bs2.min.js"></script>
    <script src="assets/js/jquery.dataTables.min.js"></script>
    <script src="assets/js/jquery.dataTables.bootstrap.js"></script>
    <script src="assets/layer/layer.js" type="text/javascript" ></script>
    <script src="js/lrtk.js" type="text/javascript" ></script>
    <script src="assets/layer/layer.js" type="text/javascript"></script>
    <script src="assets/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*点击到其它角色列表后，再点击全部员工后可遍历全部员工*/
        function jump(){
            $.ajax({
                url:'/getAllDept',
                type: 'get',
                dataType:'json',
                success:function (data) {
                    $('#content').html('');
                    $.each(data,function (i,item) {
                        $('#content').append('<tr>' +
                            '<td><label><input type="checkbox" name="flag" value="'+item.did+'" class="ace"><span class="lbl"></span></label></td>' +
                            '<td>'+item.did+'</td>' +
                            '<td>'+item.name+'</td>' +
                            '<td>'+item.phone+'</td>' +
                            '<td class="td-manage">' +
                            '<a title="编辑" onclick="deptistrator_update('+item.did+')" href="javascript:;"  class="btn btn-xs btn-info" ><i class="fa fa-edit bigger-120"></i></a>' +
                            '<a title="删除" href="javascript:;"  onclick="member_del(this,'+item.did+')" class="btn btn-xs btn-warning" ><i class="fa fa-trash  bigger-120"></i></a>' +
                            '</td>' +
                            '</tr>');
                    })
                }
            })
        }

        /*批量删除部门*/
        function deletedept(){
            var obj = document.getElementsByName("flag");/*拿到所有name=flag的对象*/
            var result = $("input[type='checkbox']").is(':checked');
            if (result==false) {
                return alert('请点击复选框在进行操作');
            }
            var s= "";
            for (var i = 0; i < obj.length; i++) {
                if (obj[i].checked) {
                    s +=obj[i].value+",";
                }
            };
            $.ajax({
                url:'/delSomeDept',
                type:'get',
                dataType:'json',
                data:'ids='+s,
                success:function (data) {
                    if (data>=1){
                        window.location.reload();
                    }
                }
            })
        }
    </script>
    <title>部门</title>
</head>

<body>
<body class="page-content clearfix">
<div class="deptistrator">
    <div class="d_Confirm_Order_style">
        <div class="search_style">
            <ul class="search_content clearfix">
                <li><label class="l_f">部门名称</label><input name="" type="text"  class="text_add" placeholder=""  style=" width:400px"/></li>
                <li><label class="l_f">添加时间</label><input class="inline laydate-icon" id="start" style=" margin-left:10px;"></li>
                <li style="width:90px;"><button type="button" class="btn_search"><i class="fa fa-search"></i>查询</button></li>
            </ul>
        </div>
        <!--操作-->
        <div class="border clearfix">
       <span class="l_f">
        <a href="javascript:void(0)" id="deptistrator_add" class="btn btn-warning"><i class="fa fa-plus"></i> 添加部门</a>
        <a href="javascript:void(0)" onclick="deletedept()" class="btn btn-danger"><i class="fa fa-trash"></i> 批量删除</a>
       </span>
            <span class="r_f">共：<b th:text="${count}"></b>部门</span>
        </div>
        <!--部门列表-->
        <div class="clearfix administrator_style" id="administrator">
            <div class="left_style">
                <div id="scrollsidebar" class="left_Treeview">
                    <div class="show_btn" id="rightArrow"><span></span></div>
                    <div class="widget-box side_content" >
                        <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
                        <div class="side_list"><div class="widget-header header-color-green2"><h4 class="lighter smaller">部门分类列表</h4></div>
                            <div class="widget-body">
                                <ul class="b_P_Sort_list">
                                    <li><i class="fa fa-users green"></i> <a href="javascript:void(0)" onclick="jump()">全部部门</a></li>
                                    <!--<li><i class="fa fa-users orange"></i> <a href="#">普通管理员（5）</a></li>
                                    <li><i class="fa fa-users orange"></i> <a href="#">产品编辑管理员（4）</a></li>
                                    <li><i class="fa fa-users orange"></i> <a href="#">管理员（1）</a></li>-->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table_menu_list"  id="testIframe">
                <table class="table table-striped table-bordered table-hover" id="sample_table">
                    <thead>
                    <tr>
                        <th width="25px"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
                        <th>ID</th>
                        <th>部门名称</th>
                        <th>部门电话</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="content">
                    <tr th:each="dept:${depts}">
                        <td><label><input type="checkbox" th:value="${dept.did}" name="flag" class="ace"><span class="lbl"></span></label></td>
                        <td th:text="${dept.did}"></td>
                        <td th:text="${dept.name}"></td>
                        <td th:text="${dept.phone}"></td>
                        <td class="td-manage">
                            <a title="编辑" th:onclick="'deptistrator_update('+${dept.did}+');'" href="javascript:;"  class="btn btn-xs btn-info" ><i class="fa fa-edit bigger-120"></i></a>
                            <a title="删除" href="javascript:;"  th:onclick="member_del(this,[[${dept.did}]]);" class="btn btn-xs btn-warning" ><i class="fa fa-trash  bigger-120"></i></a>
                        </td>
                    </tr>
                    <!--<tr>
                        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
                        <td>2</td>
                        <td>admin12345</td>
                        <td>18934334544</td>
                        <td>2345454@qq.com</td>
                        <td>管理员</td>
                        <td>2016-6-29 12:34</td>
                        <td class="td-status"><span class="label label-success radius">已启用</span></td>
                        <td class="td-manage">
                            <a onClick="member_stop(this,'10001')"  href="javascript:;" title="停用"  class="btn btn-xs btn-success"><i class="fa fa-check  bigger-120"></i></a>
                            <a title="编辑" onclick="member_edit('编辑','member-add.html','4','','510')" href="javascript:;"  class="btn btn-xs btn-info" ><i class="fa fa-edit bigger-120"></i></a>
                            <a title="删除" href="javascript:;"  onclick="member_del(this,'1')" class="btn btn-xs btn-warning" ><i class="fa fa-trash  bigger-120"></i></a>
                        </td>
                    </tr>-->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!--添加部门-->
<div id="add_administrator_style" class="add_menber" style="display:none">
    <form th:action="@{/addDept}" method="post" id="form-emp-add">
        <div class="form-group">
            <label class="form-label "><span class="c-red">*</span>部门名称：</label>
            <div class="formControls ">
                <input type="text" class="input-text" value="" placeholder="" id="user-name" name="name" datatype="m" nullmsg="部门名称不能为空">
            </div>
            <div class="col-4"> <span class="Validform_checktip"></span></div>
        </div>

        <div class="form-group">
            <label class="form-label "><span class="c-red">*</span>电话：</label>
            <div class="formControls ">
                <input type="text" class="input-text" value="" placeholder="" id="user-tel" name="phone" datatype="m" nullmsg="手机号不能为空">
            </div>
            <div class="col-4"> <span class="Validform_checktip"></span></div>

            <div>
                <input class="btn btn-primary radius" type="submit" id="Add_Administrator" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>

<!--修改管理员-->
<div id="update_administrator_style" class="add_menber" style="display:none">
    <form th:action="@{/updateDeptReal}" method="post" id="form-admin-update">
        <input type="hidden" value="" name="did">
        <div class="form-group">
            <label class="form-label "><span class="c-red">*</span>部门名称：</label>
            <div class="formControls ">
                <input type="text" class="input-text" value="" placeholder="" id="user-name-update" name="name" datatype="m" nullmsg="部门名称不能为空">
            </div>
            <div class="col-4"> <span class="Validform_checktip"></span></div>
        </div>

        <div class="form-group">
            <label class="form-label "><span class="c-red">*</span>电话：</label>
            <div class="formControls ">
                <input type="text" class="input-text" value="" placeholder="" id="user-tel-update" name="phone" datatype="m" nullmsg="手机号不能为空">
            </div>
            <div class="col-4"> <span class="Validform_checktip"></span></div>

        <div>
            <input class="btn btn-primary radius" type="submit" id="Add_Deptistrator_update" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
        </div>
    </form>
</div>

</body>

<script type="text/javascript" th:inline="none">
    jQuery(function($) {
        var oTable1 = $('#sample_table').dataTable( {
            "aaSorting": [[ 1, "desc" ]],//默认第几个排序
            "bStateSave": true,//状态保存
            "aoColumnDefs": [
                //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                {"orderable":false,"aTargets":[0]}// 制定列不参与排序
            ] } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function(){
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });

        });


        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
            return 'left';
        }
    });

</script>
<script type="text/javascript">


    $(function() {


        $("#administrator").fix({
            float : 'left',
            //minStatue : true,
            skin : 'green',
            durationTime :false,
            spacingw:50,//设置隐藏时的距离
            spacingh:270,//设置显示时间距
        });
    });
    //字数限制
    function checkLength(which) {
        var maxChars = 100; //
        if(which.value.length > maxChars){
            layer.open({
                icon:2,
                title:'提示框',
                content:'您输入的字数超过限制!',
            });
            // 超过限制的字数了就将 文本框中的内容按规定的字数 截取
            which.value = which.value.substring(0,maxChars);
            return false;
        }else{
            var curr = maxChars - which.value.length; //250 减去 当前输入的
            document.getElementById("sy").innerHTML = curr.toString();
            return true;
        }
    };
    //初始化宽度、高度
    $(".widget-box").height($(window).height()-215);
    $(".table_menu_list").width($(window).width()-260);
    $(".table_menu_list").height($(window).height()-215);
    //当文档窗口发生改变时 触发
    $(window).resize(function(){
        $(".widget-box").height($(window).height()-215);
        $(".table_menu_list").width($(window).width()-260);
        $(".table_menu_list").height($(window).height()-215);
    })
    laydate({
        elem: '#start',
        event: 'focus'
    });

    /*用户-停用*/
    /*   function member_stop(obj,id){
           layer.confirm('确认要停用吗？',function(index){
               $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="fa fa-close bigger-120"></i></a>');
               $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
               $(obj).remove();
               layer.msg('已停用!',{icon: 5,time:1000});
           });
       }*/
    /*用户-启用*/
    /*    function member_start(obj,id){
            layer.confirm('确认要启用吗？',function(index){
                $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="fa fa-check  bigger-120"></i></a>');
                $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
                $(obj).remove();
                layer.msg('已启用!',{icon: 6,time:1000});
            });
        }*/
    /*产品-编辑*/
    /*   function member_edit(title,url,id,w,h){
           layer_show(title,url,w,h);
       }*/

    /*部门-删除*/
    function member_del(obj,did){

        layer.confirm('确认要删除吗？',function(index){
            $.ajax({
                url:'/delDept',
                type:'get',
                dataType:'json',
                data:'did='+did,
                success:function (data) {
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!',{icon:1,time:1000});
                }
            })
        });
    }

    /*修改部门*/
    function deptistrator_update(did){
        $.ajax({
            url:'/updateDept',
            type:'get',
            dataType:'json',
            data:'did='+did,
            success:function (data) {
                layer.open({
                    type: 1,
                    title:'修改部门',
                    area: ['700px',''],
                    shadeClose: false,
                    content: $('#update_administrator_style'),
                });
                $('input[type=hidden]').val(data.did);
                $('#user-name-update').val(data.name);
                $('#user-tel-update').val(data.phone);
            }
        })
    }

    /*添加部门*/
    $('#deptistrator_add').on('click', function(){
        layer.open({
            type: 1,
            title:'添加员工',
            area: ['700px',''],
            shadeClose: false,
            content: $('#add_administrator_style'),

        });
    })
    //表单验证提交
    $("#form-admin-add").Validform({

        tiptype:2,

        callback:function(data){
            //form[0].submit();
            if(data.status==1){
                layer.msg(data.info, {icon: data.status,time: 1000}, function(){
                    location.reload();//刷新页面
                });
            }
            else{
                layer.msg(data.info, {icon: data.status,time: 3000});
            }
            var index =parent.$("#iframe").attr("src");
            parent.layer.close(index);

        }


    });
</script>

</html>

